<template>
  <div>
    <h1>v-text的使用</h1>
    <p>{{ msg }}</p>
    <!-- 语法:v-text='值' ,可以替换标签之间的内容 -->
    <p v-text="msg"></p>
    <!-- 还可以拼接字符串,调用api,写三元表达式 -->
    <p v-text="msg.toUpperCase()"></p>
    <!-- 与插件表达式的区别在于:插值可以实现部分替换,而v-text是完全替换 -->
    <p>这是其他内容{{ msg }}</p>
    <p v-text="msg">这是其他的内容</p>
  </div>
</template>

<script>
export default {
  data() {
    return { msg: "hello" };
  },
};
</script>

<style lang="less" scoped>
p {
  color: #66c975;
}
</style>
